<template>
  <div style="padding: 5px">
    <div>
      <el-button type="primary" style="margin: 5px" @click="getAllMedical">显示全部病历</el-button>
    </div>
    <div>
      <el-input v-model="input" style="width: 20%" placeholder="请输入病人姓名"/>
      <el-button type="primary" style="margin: 5px" @click="selectOneMedical">搜索</el-button>
    </div>
    <div>
      <el-table :data="medicalDatalist.slice((currentPage - 1) * pageSize, currentPage * pageSize) " border
                style="width: 100%" stripe="true">
        <el-table-column sortable prop="medicalId" label="病历ID" width="60"/>
        <el-table-column prop="medicalPatientName" label="病人姓名" width="100"/>
        <el-table-column prop="medicalPatientSex" label="病人性别" width="70"/>
        <el-table-column prop="medicalPatientBloodtype" label="血型" width="70"></el-table-column>
        <el-table-column prop="medicalPatientPic" label="症状图片" width="150">
          <template #default="scope">
            <img :src="scope.row.medicalPatientPic" alt="没有图片可供参考"
                 style="width: 100px;height: 150px">
          </template>
        </el-table-column>
        <el-table-column prop="medicalDoctorName" label="主治医师" width="100"/>
        <el-table-column prop="medicalDrugName" label="建议用药" width="150"/>
        <el-table-column sortable prop="medicalDate" label="日期" width="150"/>
        <el-table-column prop="medicalDiag" label="诊断建议"/>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="修改病历" v-model="FormVisible" width="60%">
      <el-row>
        <el-form inline=true ref="form" :model="form" label-width="80px">
          <el-row>
            <el-form-item label="病人姓名" style="width: 200px">
              <el-input v-model="form.medicalPatientName"></el-input>
            </el-form-item>
            <el-form-item label="血型">
              <el-input v-model="form.medicalPatientBloodtype"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="主治医生" style="width: 200px">
              <el-input v-model="form.medicalDoctorName"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="药品名" style="width: 200px">
              <el-input v-model="form.medicalDrugName"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="性别" style="width: 200px">
              <el-select v-model="form.medicalPatientSex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-form-item label="日期" style="width: 300px">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.medicalDate"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-row>
            <el-form-item label="症状图" style="width: 300px">
              <el-input v-model="form.medicalPatientPic"></el-input>
              <img :src="form.medicalPatientPic" alt="图片加载失败" style="width: 150px; height: 150px">
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="诊断建议">
              <el-input type="textarea" v-model="form.medicalDiag"></el-input>
            </el-form-item>
          </el-row>
            <el-form-item>
              <el-button type="primary" @click="edit">保存</el-button>
            </el-form-item>
        </el-form>
      </el-row>
    </el-dialog>
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
          layout="total,prev,pager,next,jumper"
          :total="medicalDatalist.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Medical",
  data() {
    return {
      form: {},
      medicalDatalist: [],
      input: "",
      FormVisible: false,
      message: "",
      currentPage: 1,
      pageSize: 3,
    }
  },
  created() {
    this.getAllMedical();
  },

  methods: {
    getAllMedical() {
      axios.get("/api/medical").then((res) => {
        this.medicalDatalist = res.data.data;
        this.message = res.data.msg;
      });
    },
    selectOneMedical() {
      axios.get("/api/medical/"+ this.input).then((res) => {
      if(res.data.code==20041)
        {
          this.medicalDatalist = res.data.data;
          this.message = res.data.msg;
          this.data.splice(1, 0);
        }
      else {
        this.medicalDatalist=[];
        this.input="";
      }
      });
    },

    handleUpdate(row) {
      axios.get("/api/medical/s/" + row.medicalId).then((res) => {
        this.form = res.data.data;
        this.FormVisible = true;
      });
    },
    edit() {
      axios.put("/api/medical", this.form).then((res) => {
        //如果操作成功，关闭弹层，显示数据
        if (res.data.code == 20031) {
          this.FormVisible = false;
          this.form = {};
          this.$message.success("修改成功");
        } else if (res.data.code == 20030) {
          this.$message.error("修改失败");
        } else {
          this.$message.error(res.data.msg);
        }
      }).finally(() => {
        this.getAllMedical();
      });
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
    },

    handleCurrentChange: function (currentPage) {

      this.currentPage = currentPage;

    }

  }
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>